<template>
   <div style="width:450px;height:350px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            ydata1:[34,43,156,178,21,11],
            ydata2:[34,43,156,178,21,11],
            ydata3:[34,43,156,178,21,11]
        }
    },
    computed:{
        options(){
            return{
                xAxis:{
                     data:['1月份','2月份','3月份','4月份','5月份','6月份']
                },
                yAxis:{
                   
                },
                legend:{
                    bottom:0
                },
                tooltip:{
                    triggerOn:'click'
                },
                toolbox:{
                    show:true,
                    feature:{
                        saveAsImage:{
                            show:true
                        },
                        restore:{
                            show:true
                        },
                        dataView:{
                            show:true
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        dataZoom:{
                          show:true
                        }
                    }
                },
                series:[
                    {
                        name:'测试',
                        type:'bar',
                        data:this.ydata1,
                        barWidth:15,
                        itemStyle:{
                            color:'pink'
                        }
                    },
                    {
                        name:'Java',
                        type:'bar',
                        data:this.ydata2,
                        barWidth:15
                    },
                    {
                        name:'前端',
                        type:'bar',
                        data:this.ydata3,
                        barWidth:15
                    },
                     {
                        name:'综合',
                        type:'line',
                        data:this.ydata2,
                        barWidth:15
                    },
                ]
            }
        }
    },
    mounted(){
        const mychart=echarts.init(this.$refs.main)
        mychart.setOption(this.options)
    }
}  
</script>

<style>

</style>